<template>
	<view class="custom-tabs" :style="{ top: fixedTop + 'px' }">
		<!-- 主分类导航 -->
		<scroll-view v-if="!isSubCategory" scroll-x class="tabs-scroll" :scroll-left="scrollLeft" scroll-with-animation>
			<view class="tabs-bar">
				<view 
					v-for="(item, index) in list" 
					:key="item.id"
					class="tab-item"
					:class="{ active: current === item.id }"
					@tap="onTabClick(index, item)"
				>
					<text class="tab-text">{{ item.name }}</text>
					<view class="tab-line" :class="{ 'line-active': current === item.id }"></view>
				</view>
			</view>
		</scroll-view>

		<!-- 子分类标签 -->
		<view v-else class="sub-category">
			<view 
				class="tag" 
				:class="{ active: currentIndex === index }"
				v-for="(item, index) in list" 
				:key="index"
				@tap="onTabClick(index)"
			>
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomTabs',
	props: {
		list: {
			type: Array,
			default: () => []
		},
		current: {
			type: [Number, String],
			default: 0
		},
		fixedTop: {
			type: Number,
			default: 0
		},
		isSubCategory: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			scrollLeft: 0
		}
	},
	
	// 添加created生命周期，初始化时选中第一个分类
	created() {
		if (this.list.length > 0 && this.current === 0) {
			this.$nextTick(() => {
				this.$emit('change', this.list[0])
			})
		}
	},
	
	methods: {
		onTabClick(index, item) {
			if (this.current !== item.id) {
				this.$emit('change', item)
				this.$nextTick(() => {
					this.updateScrollPosition(index)
				})
			}
		},
		
		// 优化滚动位置计算
		updateScrollPosition(index) {
			const query = uni.createSelectorQuery().in(this)
			query.selectAll('.tab-item').boundingClientRect(data => {
				if (data && data.length) {
					const itemWidth = data[0].width
					const screenWidth = uni.getSystemInfoSync().windowWidth
					let offsetLeft = 0
					
					// 计算当前选中项之前所有项的宽度总和
					for (let i = 0; i < index; i++) {
						offsetLeft += data[i].width
					}
					
					// 计算目标滚动位置，使选中项居中显示
					const targetScrollLeft = offsetLeft - (screenWidth - itemWidth) / 2
					
					// 确保不会出现负值，且不会超出最大滚动范围
					this.scrollLeft = Math.max(0, Math.min(targetScrollLeft, offsetLeft))
				}
			}).exec()
		}
	}
}
</script>

<style lang="scss" scoped>
.custom-tabs {
	position: sticky;
	z-index: 97;
	background: rgba(255,255,255,0.98);
	backdrop-filter: blur(10px);
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
	
	.tabs-scroll {
		white-space: nowrap;
		width: 100%;
		
		// 隐藏滚动条
		::-webkit-scrollbar {
			display: none;
		}
	}
	
	.tabs-bar {
		display: flex;
		height: 88rpx;
		position: relative;
		
		.tab-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 40rpx;
			position: relative;
			transition: all 0.3s;
			
			.tab-text {
				font-size: 28rpx;
				color: #666;
				transition: all 0.3s;
			}
			
			.tab-line {
				position: absolute;
				bottom: 6rpx;
				left: 50%;
				transform: translateX(-50%) scaleX(0);
				width: 40rpx;
				height: 6rpx;
				border-radius: 6rpx;
				background: $uni-color-primary;
				transition: all 0.3s;
			}
			
			&.active {
				.tab-text {
					color: $uni-color-primary;
					font-weight: bold;
					transform: scale(1.1);
				}
				
				.tab-line {
					transform: translateX(-50%) scaleX(1);
				}
			}
		}
	}

	// 添加子分类样式
	.sub-category {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 30rpx;
		background-color: #fff;
		
		.tag {
			padding: 10rpx 30rpx;
			background: #f5f5f5;
			border-radius: 26rpx;
			margin: 10rpx;
			font-size: 26rpx;
			color: #666;
			
			&.active {
				background: $uni-color-primary;
				color: #fff;
			}
		}
	}
}
</style> 